<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="true"
      :footer="null"
      width="846px"
      title="抓拍图片"
      wrapClassName="user-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-carousel v-if="previewImgs.length > 0" arrows>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px; zindex: 1"
          >
            <a-icon type="left-circle" theme="filled" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" theme="filled" />
          </div>
          <div class="content" v-for="v in previewImgs" :key="v.id">
            <img class="coverImg" :src="v" />
          </div>
        </a-carousel>
        <a-empty description="暂无数据" v-else />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "snapPictureModal",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    previewImgs: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.imgPath = this.imgUrl;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      imgPath: "",
    };
  },
  mounted() {},
  methods: {
    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
//弹框样式
/deep/.user-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px;
    max-height: 600px;
    .custom-scrollbar();
    .el-image {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
    position: relative;

    // .pre-button,
    // .next-button {
    //   width: 18px;
    //   height: 28px;
    //   //   position: absolute;
    //   //   top: 50%;
    //   //   transform: translateY(-50%);
    //   cursor: pointer;
    //   &.dis {
    //     cursor: no-drop;
    //   }
    // }

    // .pre-button {
    //   //   left: 0px;
    //   background: url("https://jszhgd.cn/static/pc/home/swiperActiveBtn.png")
    //     no-repeat left center;
    //   background-size: 100% 100%;
    // }

    // .next-button {
    //   //   right: 0px;
    //   background: url("https://jszhgd.cn/static/pc/home/swiperActiveBtn.png")
    //     no-repeat left center;
    //   background-size: 100% 100%;
    //   transform: rotate(-180deg);
    // }

    // /deep/.ant-carousel {
    //   .slick-prev {
    //     // left: -25px !important;
    //   }
    //   .carousel-item {
    //     height: 100%;
    //     img {
    //       width: 100%;
    //       height: 100%;
    //     }
    //   }
    //   .slick-dots {
    //     display: none !important;
    //   }
    // }
  }
}
/deep/.ant-carousel {
  height: 552px;
  border-radius: 4px;
  overflow: hidden;
  .content {
    height: 552px;
    position: relative;
    .coverImg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 552px;
  overflow: hidden;
}
.ant-carousel >>> .custom-slick-arrow {
  width: 32px;
  height: 32px;
  background: #fff;
  opacity: 0.5;
  border-radius: 50%;
  overflow: hidden;
  z-index: 999;
}
.anticon {
  font-size: 32px;
  color: rgba(0, 0, 0, 0.5);
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
  background: #fff;
}
</style>
